<template>
	<div class="bg-gray-100 main">
		<div class="flex justify-around p-2">
			<div class="flex justify-between">
				<div @click="show = true">
					<van-button size="small" type="primary">配置光照</van-button>
				</div>
				<div class="ml-2"></div>
			</div>
			<div class="text-xl flex items-center">当前已学习时间:{{ learnTime }}分钟</div>
		</div>
		<div class="p-5">
			<div>状态</div>
			<div class="h-[10vh] border border-gray-400 p-2">
				<div class="flex justify-between">
					<div :class="['bg-blue-400 rounded p-2', { 'bg-amber-400': learnStatus === '未开始' }]">未开始</div>
					<div :class="['bg-blue-400 rounded p-2', { 'bg-amber-400': learnStatus === '正在学习' }]">正在学习</div>
					<div :class="['bg-blue-400 rounded p-2', { 'bg-amber-400': learnStatus === '已暂停' }]">已暂停</div>
				</div>
			</div>
		</div>
		<div class="p-5">
			<div>提醒时间</div>
			<div class="border border-gray-400 p-4">
				<div class="flex justify-center items-center text-xl font-bold">
					<div>距离下次休息:</div>
					<van-count-down :time="time" />
				</div>
			</div>
		</div>

		<div class="p-5">
			<div>光照</div>
			<div class="grid w-full grid-cols-2 gap-10 p-4 border border-gray-400">
				<div class="mx-auto">
					<van-circle text="光强" v-model:current-rate="currentRate" :rate="currentConfig.light" color="#1e293b" />
				</div>
				<div class="mx-auto">
					<van-circle text="红光色值" v-model:current-rate="currentRate" color="#ef4444" :rate="currentConfig.red" />
				</div>
				<div class="mx-auto">
					<van-circle text="绿光色值" v-model:current-rate="currentRate" color="#22c55e" :rate="currentConfig.green" />
				</div>
				<div class="mx-auto">
					<van-circle text="蓝光色值" v-model:current-rate="currentRate" color="#0ea5e9" :rate="currentConfig.blue" />
				</div>
			</div>
		</div>
		<div class="p-5">
			<div>温湿度</div>
			<div class="grid w-full grid-cols-2 gap-10 p-4 border border-gray-400">
				<div class="mx-auto">
					<van-circle text="温度" v-model:current-rate="tempHum.hum" :rate="tempHum.hum" color="#22c55e" />
				</div>
				<div class="mx-auto">
					<van-circle text="湿度" v-model:current-rate="tempHum.temp" :rate="tempHum.temp" color="#0ea5e9" />
				</div>
			</div>
		</div>

		<van-dialog v-model:show="show" title="光照调节" show-cancel-button>
			<div>
				<div class="flex flex-col gap-10 p-5">
					<div class="flex flex-col gap-4">
						<div>光强:{{ lightValue.light }}</div>
						<div>
							<van-slider v-model="lightValue.light" :max="255" :min="0" />
						</div>
					</div>
					<div class="flex flex-col gap-4">
						<div>红光色值:{{ lightValue.red }}</div>
						<div>
							<van-slider v-model="lightValue.red" :max="255" :min="0" />
						</div>
					</div>
					<div class="flex flex-col gap-4">
						<div>绿光色值:{{ lightValue.green }}</div>
						<div>
							<van-slider v-model="lightValue.green" :max="255" :min="0" />
						</div>
					</div>
					<div class="flex flex-col gap-4">
						<div>蓝光色值:{{ lightValue.blue }}</div>
						<div>
							<van-slider v-model="lightValue.blue" :max="255" :min="0" />
						</div>
					</div>
				</div>
			</div>
		</van-dialog>
	</div>
</template>

<script setup>
import { onMounted, onUnmounted, reactive, ref } from "vue";
import instance from "@/api/client.js";
import { closeToast, showLoadingToast, showToast } from "vant";
//60 * 60 * 60 * 1000
const time = ref(0);
const lightValue = reactive({
	light: 0,
	red: 0,
	green: 0,
	blue: 0,
});
const show = ref(false);
const currentRate = ref(0);
const learnStatus = ref("");
const learnTime = ref("0");
const currentConfig = ref({
	// 语音合成模块配置，右边值为默认值
	speaker: "[d][v1][m2][t5][y0][x1][o0]",
	// 配置回报间隔 ms，右边值为默认值
	duration: 10000,
	// MQTT 协议配置，右边值为默认值
	mqtt: {
		// MQTT 客户端ID，右边值为默认值
		clientId: "MAC地址",
		// MQTT 基础订阅地址，右边值为默认值
		baseTopic: "/mysf/smart-desk",
	},
	// 工作模式，0 - 自动模式；1 - 手动模式；2 - 远控模式；3 - 关灯模式，不建议在此修改（但修改其他值时请回传）
	mode: 0,
	// 光强 0 ~ 4095，不建议在此修改有专门的远控订阅用于调整（但修改其他值时请回传）
	light: 4095,
	// 红光色值，0 ~ 255，没有默认值
	red: 0,
	// 绿光色值，0 ~ 255，没有默认值
	green: 0,
	// 蓝光色值，0 ~ 255，没有默认值
	blue: 0,
	// 测距配置，右边值为默认值
	ranging: {
		// 测距报警阈值，右边值为默认值
		threshold: 0,
	},
	// 人体检测配置，没有默认值
	human: {
		// 人体检测触发阈值，没有默认值
		threshold: 0,
	},
});
const tempHum = reactive({
	temp: 0,
	hum: 0,
});
onMounted(async () => {
	showLoadingToast({
		message: "加载中...",
		forbidClick: true,
	});
	try {
		const res = await instance.get("/desk/learn/getLearnStatus");
		if (res) {
			learnStatus.value = res.status ?? "未开始";
			console.log(res);
			if (learnStatus.value === "正在学习") {
				time.value = res.data.learnTime;
				time.value = res.data.nextWaitTime;
			}
		}
		const res2 = await instance.get("/desk/config/getLastConfig");
		if (res2) {
			if (res2.data) {
				currentConfig.value = JSON.parse(res2.data.content);
			}
		}
	} catch (error) {
		showToast({
			message: "加载失败",
			type: "fail",
		});
		console.log(error);
	} finally {
		closeToast(true);
	}
	startTempHum();
});
let startTempHumInterval = null;
const startTempHum = () => {
	startTempHumInterval = setInterval(() => {
		instance.get("/desk/hum/getLastDate").then((res) => {
			if (res.data) {
				tempHum.temp = res.data.temp ?? 0;
				tempHum.hum = res.data.hum ?? 0;
				console.log(tempHum.temp, tempHum.hum);
			}
		});
	}, 3000);
};
onUnmounted(() => {
	if (startTempHumInterval) {
		clearInterval(startTempHumInterval);
	}
});
</script>
<style scoped></style>
